<template>
  <div class="box">
    <!-- 搜索栏 -->
    <search-bar @handleSearch="init"
                placeHolder="请输入公司名称/负责人" />
    <!-- 数据展示 -->
    <table-data-el :tableData="tableData.list"
                   :tableLabel="tableLabel"
                   :page.sync="page"
                   :pageSize.sync="pageSize"
                   :pageCount="tableData.rows"
                   v-loading="loading"
                   @handleNum="handleNum" />
    <v-dialog :show.sync="isShowDialog"
              width="30%">
      <template>
        <el-input v-model.number="currentNum"
                  style="width:70%;margin-right:10%;">
          <template slot="append">
            次
          </template>
        </el-input>
        <el-button type="primary"
                   @click="mdfNum">修改</el-button>
      </template>
    </v-dialog>
  </div>
</template>

<script>
  import tableDataEl from '@/views/Setup/common/table'

  export default {
  name: "free",
  data () {
    return {
      tableData: [], //表格数据
      tableLabel: [ //表格数据对应的标题
        {
          label: '运营商名称',
          prop: 'company'
        },
        {
          label: '负责人',
          prop: 'leader'
        },
        {
          label: '联系电话',
          prop: 'phone'
        },
        {
          label: '地区个数',
          prop: 'regions'
        },
        {
          label: '次数',
          prop: 'free_times',
          mdyMoney: true,
          methodName: 'handleNum'
        }
      ], //表格数据对应的标题
      page: 1, //当前页
      pageSize: 8, //每页显示多少条数据
      searchKey: '',
      currentNum: '',
      oldNum: '',
      activeData: {},
      isShowDialog: false, //次数弹框默认隐藏
      loading: false
    }
  },
  components: {
    tableDataEl
  },
  methods: {
    async init (searchkey = this.searchKey) {
      this.loading = true;
      let valueStr = Object.assign(searchkey, {page: this.page, pageSize: this.pageSize});
      let res = await this.api.freeTaste(valueStr).then(res => res);
      this.tableData = res.data;
      this.loading = false;
    },
    handleNum (value) {
      this.isShowDialog = true;
      this.currentNum = value['free_times'];
      this.oldNum = value['free_times'];
      this.activeData = value;
    },
    async mdfNum () {
      if (this.currentNum === this.oldNum) return false;
      let res = await this.api.setFreeNum({ aid: this.activeData, free_times: this.currentNum }).then(res => res);
      this.$message({
        message: res.msg,
        type: res.code === 1 ? 'success' : 'error',
        duration: 1000
      });
      this.init();
      this.isShowDialog = false;
    }
  },
  watch: {
    page () {
      this.init()
    },
    pageSize () {
      this.init()
    }
  },
  mounted () {
    this.init()
  },
  beforeMount () {

  }
}
</script>

<style scoped>
  .box {
    padding:0 10px;
  }
</style>
